<template>
  <tm-app>
    <tm-navbar title="我的WIFI码" :followTheme="true" :hideHome="true"> </tm-navbar>
    <ad unit-id="adunit-d298e81ff25c4483"></ad>
    <tm-sheet :padding="[20]" :margin="[0]" color="#ffffff">
      <tm-input
        v-model="state.merchantName"
        prefix="tmicon-search"
        searchLabel="搜索"
        @click="getWifiList"
      ></tm-input>
    </tm-sheet>

    <tm-sheet
      :padding="[20]"
      :margin="[0]"
      :transprent="true"
      v-for="item in state.records"
      :key="item"
    >
      <view
        class="flex flex-row flex-row-center-between round-4 round-br-0"
        style="background-color: #fff"
      >
        <tm-sheet :padding="[20]" :margin="[0]" class="flex-1 round-tl-4">
          <tm-text :fontSize="32" _class="text-weight-b">{{
            item.merchantName || "空码：暂未绑定"
          }}</tm-text>
          <tm-text :fontSize="28" class="mt-n4">WIFI名称: {{ item.wifiName }}</tm-text>
          <tm-sheet
            :fontSize="28"
            :padding="[0]"
            :margin="[0]"
            _class="mt-n4 flex flex-row flex-row-center-start"
          >
            <tm-text>今日有效链接</tm-text>
            <tm-text :fontSize="28" class="mx-n6 text-weight-b" :follow-theme="true">{{
              item.todayEffective
            }}</tm-text>
            <tm-text>次</tm-text>
          </tm-sheet>
          <tm-sheet
            :padding="[0]"
            :margin="[0]"
            :fontSize="28"
            _class="mt-n4 flex flex-row flex-row-center-start"
          >
            <tm-text>累计有效链接</tm-text>
            <tm-text :fontSize="28" class="mx-n6 text-weight-b" :follow-theme="true">{{
              item.accumulativeEffective
            }}</tm-text>
            <tm-text>次</tm-text>
          </tm-sheet>
        </tm-sheet>
        <view class="mx-n4 round-tr-4">
          <tm-image :src="item.wifiCodeUrl"></tm-image>
        </view>
      </view>
      <tm-sheet
        :padding="[0, 0]"
        :margin="[0]"
        color="#fff"
        _class="flex flex-row flex-row-center-between"
        class="round-bl-4 round-br-4"
      >
        <tm-button
          :margin="[10]"
          :shadow="0"
          :height="65"
          icon="tmicon-edit"
          label="编辑"
          @click="goEditWifi(item.id)"
        >
        </tm-button>
        <tm-button
          :shadow="0"
          icon="tmicon-eye"
          label="查看"
          :height="65"
          @click="wifiPoster(item.id)"
        >
        </tm-button>
        <tm-button
          :margin="[10]"
          color="red"
          :height="65"
          :followTheme="false"
          icon="tmicon-delete-fill"
          :shadow="0"
          label="删除"
          @click="deleteWifi(item.id)"
        >
        </tm-button>
      </tm-sheet>
    </tm-sheet>
    <tm-message ref="msg"></tm-message>
  </tm-app>
</template>

<script setup>
import { getWifiCodeInfoListApi, delWifiCodeInfoApi } from "@/api";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
const msg = ref(null);

const state = reactive({
  records: [],
  merchantName: "",
});

onLoad(() => {
  getWifiList();
});
onReachBottom(() => {
  console.log(1);
});

const getWifiList = async () => {
  const { records, total } = await getWifiCodeInfoListApi({
    merchantName: state.merchantName,
  });
  state.records = records;
};

const goEditWifi = (id) => {
  uni.navigateTo({
    url: "/homePages/createWifi?id=" + id.toString(),
  });
};
const wifiPoster = (id) => {
  uni.navigateTo({
    url: "/homePages/shareWifiCode?id=" + id.toString(),
  });
};

const deleteWifi = async (id) => {
  await delWifiCodeInfoApi({ id });
  state.records = state.records.filter((item) => item.id !== id);
  msg.value.show({ model: "success", text: "删除成功" });
};
</script>

<style scoped></style>
